<template>
  <article class="bg-neutral-100 rounded-xl overflow-hidden shadow-sm card-hover">
    <div class="overflow-hidden">
      <img :src="moment.image" :alt="moment.alt" class="w-full h-56 object-cover img-zoom">
    </div>
    <div class="p-6">
      <span :class="moment.tagClass" class="text-sm font-medium px-3 py-1 rounded-full">
        {{ moment.tag }}
      </span>
      <h3 class="text-xl font-bold mt-4 mb-3 hover:text-primary transition-colors">
        <a href="#">{{ moment.title }}</a>
      </h3>
      <p class="text-neutral-600 mb-4 line-clamp-3">
        {{ moment.description }}
      </p>
      <div class="flex justify-between items-center">
        <span class="text-sm text-neutral-500">{{ moment.date }}</span>
        <span class="text-sm text-neutral-500">
          <i class="fa fa-heart-o mr-1"></i> {{ moment.likes }}
        </span>
      </div>
    </div>
  </article>
</template>

<script setup>
defineProps({
  moment: {
    type: Object,
    required: true
  }
})
</script>